DatePicker - Code Metrics - pamo18/pamo18.me - Measure and Improve Code Quality continuously with Scrutinizer

DatePicker A
last analyzed 2019-10-10 11:44 UTC

↳ Parent: src/components/form/DatePicker.js

Complexity

Total Complexity

Size/Duplication

Total Lines	182
Duplicated Lines	0 %

Importance

Changes

Metric	Value
wmc	19
eloc	154
dl	0
loc	182
rs	10
c	0
b	0
f	0

8 Functions

Rating	Name	Size	Complexity
A	getYears	15	3
A	getMonths	13	3
A	selectDate	4	1
A	onMonthChange	12	1
A	onYearChange	13	1
A	componentDidMount	8	1
C	initMonth	54	8
A	render	35	1

/*eslint max-len: ["error", { "code": 150 }]*/

import React, { Component } from 'react';
import utils from '../../utils/utils.js';

class DatePicker extends Component {
    constructor(props) {
        super(props);
        this.onMonthChange = this.onMonthChange.bind(this);
        this.onYearChange = this.onYearChange.bind(this);
        this.initMonth = this.initMonth.bind(this);
        this.state = {
            date: new Date(),
            monthPicker: "",
            monthName: "",
            monthNumber: "",
            year: ""
        };
    }
    componentDidMount() {
        this.setState({
            monthPicker: this.initMonth()
        }, () => {
            this.setState({
                monthName: this.state.date.toLocaleString('default', { month: 'long' }),
                monthNumber: this.state.date.getMonth(),
                year: this.state.date.getFullYear()
            });
        });
    }
    getMonths() {
        let options = [],
            allMonths = utils.getMonthNames();

        // eslint-disable-next-line no-unused-vars
        for (let month in allMonths) {
            if (this.state.monthName === month) {
                options.push(<option selected value={allMonths[month]}>{month}</option>);
            } else {
                options.push(<option value={allMonths[month]}>{month}</option>);
            }
        }
        return options;
    }
    getYears() {
        let currentDate = new Date(),
            currentYear = currentDate.getFullYear(),
            allYears = [];

        for (let y = 0; y <= 150; y++) {
            let year = currentYear - y;

            if (this.state.date.getFullYear() === year) {
                allYears.push(<option selected value={year}>{year}</option>);
            } else {
                allYears.push(<option value={year}>{year}</option>);
            }
        }
        return allYears;
    }
    selectDate(selected) {
        let dob = document.getElementById("birthday");

        dob.value = selected;
    }
    onMonthChange(e) {
        let y = this.state.year,
            m = parseInt(e.target.value);

        this.setState({
            date: new Date(y, m, 1),
        }, () => {
            this.setState({
                monthPicker: this.initMonth(),
                monthName: this.state.date.toLocaleString('default', { month: 'long' }),
                monthNumber: this.state.date.getMonth(),
                year: this.state.date.getFullYear()
            });
        });
    }
    onYearChange(e) {
        console.log(this.state.monthName);
        const y = e.target.value;
        const m = this.state.monthNumber;

        this.setState({
            date: new Date(y, m, 1),
        }, () => {
            this.setState({
                monthPicker: this.initMonth(),
                monthName: this.state.date.toLocaleString('default', { month: 'long' }),
                monthNumber: this.state.date.getMonth(),
                year: this.state.date.getFullYear()
            });
        });
    }
    initMonth() {
        let current = this.state.date,
            selectedMonth = current.getMonth(),
            selectedYear = current.getFullYear(),
            currentMonth = utils.getMonthSetup(selectedYear, selectedMonth),
            startDay = utils.getDayPos(currentMonth.start),
            endDay = currentMonth.end,
            day,
            week,
            weeks = {
                1: [],
                2: [],
                3: [],
                4: [],
                5: [],
                6: []
            };

        for (let i = 0; i < startDay; i++) {
            weeks[1].push(<td className="dates empty"></td>);
        }
        for (day = 1; day <= (7 - startDay); day++) {
            let currentDate = this.state.date;

            currentDate.setDate(day);
            let dateSting = utils.getDateAsString(currentDate);

            if (utils.isToday(currentDate)) {
                weeks[1].push(<td className="dates today" onClick={() => this.selectDate(dateSting)}>{currentDate.getDate()}</td>);
            } else {
                weeks[1].push(<td className="dates" onClick={() => this.selectDate(dateSting)}>{currentDate.getDate()}</td>);
            }
        }

        for (week = 2; week <= 6; week++) {
            for (let i = 1; i <= 7; i++) {
                if (day <= endDay) {
                    let currentDate = this.state.date;

                    currentDate.setDate(day);
                    let dateSting = utils.getDateAsString(currentDate);

                    if (utils.isToday(currentDate)) {
                        weeks[week].push(<td className="dates today" onClick={() => this.selectDate(dateSting)}>{currentDate.getDate()}</td>);
                    } else {
                        weeks[week].push(<td className="dates" onClick={() => this.selectDate(dateSting)}>{currentDate.getDate()}</td>);
                    }
                } else {
                    weeks[week].push(<td className="dates empty"></td>);
                }
                day++;
            }
        }
        return weeks;
    }
    render() {
        return (
            <div id="date-picker" className="date-wrapper">
                <table className="date-picker">
                    <thead>
                        <tr>
                            <th className="left" colSpan="5">
                                <select name="months" onChange={this.onMonthChange}>
                                    { this.getMonths() }
                                </select>
                            </th>
                            <th className="right" colSpan="2">
                                <select name="years" onChange={this.onYearChange}>
                                    { this.getYears() }
                                </select>
                            </th>
                        </tr>
                    </thead>
                    <tr>
                        <td width="14.286%">Mon</td>
                        <td width="14.286%">Tue</td>
                        <td width="14.286%">Wed</td>
                        <td width="14.286%">Thu</td>
                        <td width="14.286%">Fri</td>
                        <td width="14.286%">Sat</td>
                        <td width="14.286%">Sun</td>
                    </tr>
                    <tr>{ this.state.monthPicker[1] }</tr>
                    <tr>{ this.state.monthPicker[2] }</tr>
                    <tr>{ this.state.monthPicker[3] }</tr>
                    <tr>{ this.state.monthPicker[4] }</tr>
                    <tr>{ this.state.monthPicker[5] }</tr>
                    <tr>{ this.state.monthPicker[6] }</tr>
                </table>
            </div>
        );
    }
}

export default DatePicker;


1			/eslint max-len: ["error", { "code": 150 }]/
2
3			import React, { Component } from 'react';
4			import utils from '../../utils/utils.js';
5
6			class DatePicker extends Component {
7			constructor(props) {
8			super(props);
9			this.onMonthChange = this.onMonthChange.bind(this);
10			this.onYearChange = this.onYearChange.bind(this);
11			this.initMonth = this.initMonth.bind(this);
12			this.state = {
13			date: new Date(),
14			monthPicker: "",
15			monthName: "",
16			monthNumber: "",
17			year: ""
18			};
19			}
20			componentDidMount() {
21			this.setState({
22			monthPicker: this.initMonth()
23			}, () => {
24			this.setState({
25			monthName: this.state.date.toLocaleString('default', { month: 'long' }),
26			monthNumber: this.state.date.getMonth(),
27			year: this.state.date.getFullYear()
28			});
29			});
30			}
31			getMonths() {
32			let options = [],
33			allMonths = utils.getMonthNames();
34
35			// eslint-disable-next-line no-unused-vars
36			for (let month in allMonths) {
37			if (this.state.monthName === month) {
38			options.push(<option selected value={allMonths[month]}>{month}</option>);
39			} else {
40			options.push(<option value={allMonths[month]}>{month}</option>);
41			}
42			}
43			return options;
44			}
45			getYears() {
46			let currentDate = new Date(),
47			currentYear = currentDate.getFullYear(),
48			allYears = [];
49
50			for (let y = 0; y <= 150; y++) {
51			let year = currentYear - y;
52
53			if (this.state.date.getFullYear() === year) {
54			allYears.push(<option selected value={year}>{year}</option>);
55			} else {
56			allYears.push(<option value={year}>{year}</option>);
57			}
58			}
59			return allYears;
60			}
61			selectDate(selected) {
62			let dob = document.getElementById("birthday");
63
64			dob.value = selected;
65			}
66			onMonthChange(e) {
67			let y = this.state.year,
68			m = parseInt(e.target.value);
69
70			this.setState({
71			date: new Date(y, m, 1),
72			}, () => {
73			this.setState({
74			monthPicker: this.initMonth(),
75			monthName: this.state.date.toLocaleString('default', { month: 'long' }),
76			monthNumber: this.state.date.getMonth(),
77			year: this.state.date.getFullYear()
78			});
79			});
80			}
81			onYearChange(e) {
82			console.log(this.state.monthName);
83			const y = e.target.value;
84			const m = this.state.monthNumber;
85
86			this.setState({
87			date: new Date(y, m, 1),
88			}, () => {
89			this.setState({
90			monthPicker: this.initMonth(),
91			monthName: this.state.date.toLocaleString('default', { month: 'long' }),
92			monthNumber: this.state.date.getMonth(),
93			year: this.state.date.getFullYear()
94			});
95			});
96			}
97			initMonth() {
98			let current = this.state.date,
99			selectedMonth = current.getMonth(),
100			selectedYear = current.getFullYear(),
101			currentMonth = utils.getMonthSetup(selectedYear, selectedMonth),
102			startDay = utils.getDayPos(currentMonth.start),
103			endDay = currentMonth.end,
104			day,
105			week,
106			weeks = {
107			1: [],
108			2: [],
109			3: [],
110			4: [],
111			5: [],
112			6: []
113			};
114
115			for (let i = 0; i < startDay; i++) {
116			weeks[1].push(<td className="dates empty"></td>);
117			}
118			for (day = 1; day <= (7 - startDay); day++) {
119			let currentDate = this.state.date;
120
121			currentDate.setDate(day);
122			let dateSting = utils.getDateAsString(currentDate);
123
124			if (utils.isToday(currentDate)) {
125			weeks[1].push(<td className="dates today" onClick={() => this.selectDate(dateSting)}>{currentDate.getDate()}</td>);
126			} else {
127			weeks[1].push(<td className="dates" onClick={() => this.selectDate(dateSting)}>{currentDate.getDate()}</td>);
128			}
129			}
130
131			for (week = 2; week <= 6; week++) {
132			for (let i = 1; i <= 7; i++) {
133			if (day <= endDay) {
134			let currentDate = this.state.date;
135
136			currentDate.setDate(day);
137			let dateSting = utils.getDateAsString(currentDate);
138
139			if (utils.isToday(currentDate)) {
140			weeks[week].push(<td className="dates today" onClick={() => this.selectDate(dateSting)}>{currentDate.getDate()}</td>);
141			} else {
142			weeks[week].push(<td className="dates" onClick={() => this.selectDate(dateSting)}>{currentDate.getDate()}</td>);
143			}
144			} else {
145			weeks[week].push(<td className="dates empty"></td>);
146			}
147			day++;
148			}
149			}
150			return weeks;
151			}
152			render() {
153			return (
154			<div id="date-picker" className="date-wrapper">
155			<table className="date-picker">
156			<thead>
157			<tr>
158			<th className="left" colSpan="5">
159			<select name="months" onChange={this.onMonthChange}>
160			{ this.getMonths() }
161			</select>
162			</th>
163			<th className="right" colSpan="2">
164			<select name="years" onChange={this.onYearChange}>
165			{ this.getYears() }
166			</select>
167			</th>
168			</tr>
169			</thead>
170			<tr>
171			<td width="14.286%">Mon</td>
172			<td width="14.286%">Tue</td>
173			<td width="14.286%">Wed</td>
174			<td width="14.286%">Thu</td>
175			<td width="14.286%">Fri</td>
176			<td width="14.286%">Sat</td>
177			<td width="14.286%">Sun</td>
178			</tr>
179			<tr>{ this.state.monthPicker[1] }</tr>
180			<tr>{ this.state.monthPicker[2] }</tr>
181			<tr>{ this.state.monthPicker[3] }</tr>
182			<tr>{ this.state.monthPicker[4] }</tr>
183			<tr>{ this.state.monthPicker[5] }</tr>
184			<tr>{ this.state.monthPicker[6] }</tr>
185			</table>
186			</div>
187			);
188			}
189			}
190
191			export default DatePicker;
192

pamo18 / pamo18.me

DatePicker A last analyzed 2019-10-10 11:44 UTC

Complexity

Size/Duplication

Importance

8 Functions

Duplication Side-by-Side

Filter issues like

DatePicker A
last analyzed 2019-10-10 11:44 UTC